<template>
  <div class="wrap-container sn-container">
    <div class="sn-content">
      <div class="sn-title">销售统计图</div>
      <div class="sn-body">
        <div class="wrap-container">
          <div id="lineChart" class="lineChart"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { getTurnoverList } from '@/api/home'
  import { nextTick } from 'vue'
  export default {
    name: 'lineEchart',
    data() {
      return {
        lineOption: null,
        querydata: {
          pageNum: 1,
          pageSize: 1000
        },
        turnoverList: [
          { id: 1, name: "核心数据库平台" },
          { id: 2, name: "自有硬件一体机" },
          { id: 3, name: "数据集成工具及应用展示" },
          { id: 4, name: "数据治理工具及数据迁移服务" },
          { id: 5, name: "数据系统运维管理工具及数据系统设计" },
          { id: 6, name: "数据建模工具及智能数据服务" },
        ],
        dataShow: {
          "核心数据库平台": [820, 932, 901, 934, 1290, 1330, 1320, 780, 880, 560, 120, 450],
          "自有硬件一体机": [720, 732, 901, 974, 1290, 1330, 1320, 990, 1300, 1100, 880, 650],
          "数据集成工具及应用展示": [920, 732, 951, 974, 1090, 930, 1120, 1400, 1200, 1100, 1300, 890],
          "数据治理工具及数据迁移服务": [848, 875, 684, 832, 1094, 658, 1078, 1151, 953, 1078, 1461, 988],
          "数据系统运维管理工具及数据系统设计": [543, 753, 764, 522, 764, 743, 843, 867, 825, 827, 978, 962],
          "数据建模工具及智能数据服务": [745, 542, 795, 246, 584, 468, 279, 245, 853, 753, 732, 772]
        }
      };
    },
    async mounted() {
      // await this.getData();
      this.getOption();
      let chartLine = {
        id: 'lineChart',
        chart: null,
        options: this.lineOption
      }
      nextTick(() => {
        chartLine.chart = this.$echarts.init(document.getElementById(chartLine.id));
        chartLine.chart.setOption(chartLine.options);
      })
      window.addEventListener('resize', () => {
        chartLine.chart.resize()
      })
    },
    methods: {
      getOption() {
        let dataLegend = Object.keys(this.dataShow);
        let option = {
          legend: {
            data: dataLegend,
            y: 'top',
            textStyle: {
              color: '#fff'  // 图例文字颜色
            },
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#6a7985'
              }
            },
            textStyle: {
              align: 'left'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            axisLine: {  //设置x轴坐标线的样式
              lineStyle: {
                type: 'solid',
                color: '#FFF',//x轴坐标线的颜色
                width: '1'//x轴坐标线的宽度
              }
            },
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
          },
          yAxis: {
            type: 'value',
            axisLine: {
              lineStyle: {
                type: 'solid',
                color: '#FFF',//x轴坐标线的颜色
                width: '1'//x轴坐标线的宽度
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dashed',
                color: 'grey'
              }
            }
          },
          series: [{
            name: dataLegend[0],
            data: this.dataShow[dataLegend[0]],
            type: 'line',
            smooth: true,
            symbol: 'none'
          },
          {
            name: dataLegend[1],
            data: this.dataShow[dataLegend[1]],
            type: 'line',
            smooth: true,
            symbol: 'none'
          },
          {
            name: dataLegend[2],
            data: this.dataShow[dataLegend[2]],
            type: 'line',
            smooth: true,
            symbol: 'none'
          },
          {
            name: dataLegend[3],
            data: this.dataShow[dataLegend[3]],
            type: 'line',
            smooth: true,
            symbol: 'none'
          },
          {
            name: dataLegend[4],
            data: this.dataShow[dataLegend[4]],
            type: 'line',
            smooth: true,
            symbol: 'none'
          },
          {
            name: dataLegend[5],
            data: this.dataShow[dataLegend[5]],
            type: 'line',
            smooth: true,
            symbol: 'none'
          }
          ],
          color: ['#FF7F00', '#d5c245', '#01a455', '#85adfb', '#c36885', '#D9D9F3']
        }
        this.lineOption = option;
      },

      async getData() {
        let res = await getTurnoverList(this.querydata);
        if (res.data.code === 200) {
          this.dataShow = this.formatData(res.data.rows);
        }else{
          console.log("请求失败");
        }
      },
      formatData(data) {
        let resultObj = {};
        for (let item of data) {
          let resultIndex = this.turnoverList[Number(item.turnoverProductType) - 1].name;

          if (resultObj[resultIndex]) {
            resultObj[resultIndex][0] = item['turnoverMoney'];
            resultObj[resultIndex][Number(item.turnoverMonth) - 1] = item['turnoverMoney'];
          } else {
            resultObj[resultIndex] = new Array(12);
            resultObj[resultIndex][Number(item.turnoverMonth) - 1] = item['turnoverMoney'];
          }
        }
        return resultObj;
      }

    },


  };
</script>

<style lang="scss" scoped>
  .sn-container {
    left: 25.5%;
    width: 48.5%;
    height: 100%;

    .lineChart {
      width: 100%;
      height: 100%;
    }
  }
</style>